<template>
    <div class="detail-page">
        <div class="top-seach">加盟方式
            <span class="left" @click="back"></span>
        </div>
        <div class="carousel">
            <carousel></carousel>
        </div>
        <div class="content">
            <div class="title"><span>上海青</span>营养健康，老少皆宜</div>
            <div class="number">¥10/500g</div>
            <div class="money"><span>优惠价 ¥11/500g</span>市场价 ¥12/500g</div>
            <div class="map"><span>产地:上海</span>编号：00001</div>
        </div>
        <div class="tuijian">
            <div class="title">推荐搭配</div>
            <div class="img-box">
                <div class="img">
                    <div class="img1"></div>
                    <span>蔬菜套餐</span>
                </div>
                <div class="img">
                    <div class="img1"></div>
                    <span>蔬菜套餐</span>
                </div>
                <div class="img">
                    <div class="img1"></div>
                    <span>蔬菜套餐</span>
                </div>
                <div class="right"></div>
            </div>
        </div>
        <div class="shopping">
            <div class="gouwu"><span>10</span></div>
            <div class="start"></div>
            <div class="number">¥10.00/500g</div>
            <div class="btn">加入购物车</div>
        </div>
    </div>
</template>



<script>
import carousel from '../../commend/carousel/carousel'
export default {
    data() {
        return {
            
        }
    },
    methods:{
        back:function(){
            window.history.back(-1);    
        }
    },
    components:{  
        carousel
    }  
}
</script>

<style lang="less" rel="stylesheet/less">
.detail-page{
    padding-top:0.88rem;
    padding-bottom:1.88rem;
   .top-seach{
        width:100%;
        height:0.88rem;
        position:fixed;
        top:0;
        left:0;
        z-index:11;
        background:#ffffff;
        line-height:0.88rem;
        text-align:center;
        font-size: 0.34rem;
        color: #666666;
        .left{
            width:0.2rem;
            height:0.37rem;
            display:inline-block;
            position:absolute;
            left:0.22rem;
            top:0.28rem;
            background:url('left.png') no-repeat;
            background-size:100% 100%;
        }
   }
   .carousel{
       width:100%;
       height:5.2rem;
   }
   .content{
       width:100%;
       height:2.28rem;
       background: #00D397;
       .title{
            font-size: 0.3rem;
            color: #FFFFFF;
            padding-top:0.3rem;
            opacity: 0.89;
            span{
                margin-right:0.4rem;
                margin-left:0.22rem;
            }
       }
       .number{
            font-size: 0.48rem;
            color: #FFFFFF;
            margin-left:0.22rem;
            margin-top:0.1rem;
       }
       .money{
            padding-top:0.1rem;
            font-size: 0.26rem;
            color: #FFFFFF;
            opacity: 0.89;
            span{
                margin-right:0.4rem;
                margin-left:0.22rem;
            }
       }
       .map{
            font-size: 0.24rem;
            color: #FFFFFF;
            margin-left:0.22rem;
            margin-top:0.2rem;
            opacity: 0.89;
            span{
                margin-right:4.61rem;
            }
       }
   }
   .tuijian{
       .title{
            height:0.8rem;
            line-height:0.8rem;
            padding-left:0.2rem;
            font-size: 0.28rem;
            color: #333333;
       }
       .img-box{
           width:7.1rem;
           margin:0 auto;
           display:flex;
           .img{
                width:1.75rem;
                height:auto;
                margin:0.19rem;
                font-size: 0.26rem;
                color: #333333;
                .img1{
                    width:1.75rem;
                    height:1.94rem;
                    img{
                        width:100%;
                        height:100%;
                    }
                }
                span{
                    display:block;
                    text-align:center;
                    margin-top:0.2rem;
                }
           }
           .right{
               width:0.14rem;
               height:0.22rem;
               background:url('right.png') no-repeat;
               background-size:100% 100%;
               margin:1.12rem 0 0 0.3rem;
           }
       }
   }
   .shopping{
        width:100%;
        height:1rem;
        position:fixed;
        left:0;
        bottom:0;
        opacity: 0.89;
        background: #424242;
        display:flex;
        font-size:0.32rem;
        .gouwu{
            width:0.49rem;
            height:0.46rem;
            background:url('gouwu.png') no-repeat;
            background-size:100% 100%;
            margin:0.25rem 0 0 0.25rem;
            position:relative;
            span{
                background: #00D397;
                border-radius: 100px;
                padding:0.05rem;
                font-size: 0.18rem;
                color: #FFFFFF;
                line-height: 0.18rem;
                display:block;
                position:absolute;
                right:-50%;
                top:-20%;
            }
        }
        .start{
            width:0.47rem;
            height:0.44rem;
            background:url('start.png') no-repeat;
            background-size:100% 100%;
            margin:0.28rem 0 0 0.55rem;
            &.active{
                background:url('start-active.png') no-repeat;
                background-size:100% 100%;
            }
        }
        .number{
            height:1rem;
            line-height:1rem;
            margin-left:1.38rem;
            color:#ffffff;
        }
        .btn{
            font-size: 0.34rem;
            color: #00D397;
            height:0.6rem;
            line-height:0.6rem;
            border-left:1px solid #00D397;
            padding-left:0.2rem;
            margin:0.2rem 0 0 0.3rem;
        }
   }
}
</style>

